
  /* Dialog 
 * 
 * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
 * 
 * Dialog:
 * 1. Dialog (default styling): 
 * 		.dijitDialog - styles for dialog's bounding box
 
 * 2. Dialog title 
 * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
 * 		.dijitDialogTitle - the text container in dialog title
 * 
 * 3. Dialog content 
 * 		.dijitDialogPaneContent - main container for content area and action bar
 * 		.dijitDialogPaneContentArea - styles for content container
 * 
 * 4. Dialog action bar 
 * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
 * 
 * 5. Dialog underlay 
 * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
 * 
 * 
 * Tooltip & TooltipDialog:
 * 1. tooltip content container: 
 * 		.dijitTooltipContainer - tooltip content container
 
 * 2. tooltip connector: 
 * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
 

*/
.claro .dijitDialog {
    /*border : 1px solid #769dc0;*/
	border-color: #769dc0;
	border-style: solid;
	border-width: 1px;
    box-shadow : 0px 1px 5px rgba(0,0,0,0.25);
    -webkit-box-shadow : 0px 1px 5px rgba(0,0,0,0.25);
    -moz-box-shadow : 0px 1px 5px rgba(0,0,0,0.25);
}
.claro .dijitDialogPaneContent {
    background : #fff repeat-x top left;
     /*border-top : 1px solid #769dc0;*/
	border-top-color: #769dc0;
	border-top-style: solid;
	border-top-width: 1px;
    padding : 10px 8px;
    position : relative;
}
.claro .dijitDialogPaneContentArea {
    
  /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from
	 * left to right but still indent dialog content
	 
	*/
margin : -10px -8px;
    padding : 10px 8px;
}
.claro .dijitDialogPaneActionBar {
    
  /* gray bar at bottom of dialog with OK/Cancel buttons 
	*/
background-color : #f2f2f2;
    padding : 3px 5px 2px 7px;
    text-align : right;
    border-top : 1px solid #cdcdcd;
    margin : 10px -8px -10px;
}
.claro .dijitDialogPaneActionBar .dijitButton {
    float : none;
}
.claro .dijitDialogTitleBar {
    
  /* outer container for the titlebar of the dialog 
	*/
border : 1px solid #fff;
    border-top : none;
    background-color : #abd6ff;
    background-image : url("images/titlebar.png");
    background-repeat : repeat-x;
    padding : 5px 7px 4px 7px;
}
.claro .dijitDialogTitle {
    
  /* typography and styling of the dialog title 
	*/
padding : 0px 1px;
    font-size : 1.091em;
}
.claro .dijitDialogCloseIcon {
    
  /* the default close icon for the dialog 
	*/
background : url("images/dialogCloseIcon.png");
    background-repeat : no-repeat;
    position : absolute;
    right : 5px;
    height : 15px;
    width : 21px;
}
.dj_ie6 .claro .dijitDialogCloseIcon {
    background-image : url("images/dialogCloseIcon8bit.png");
}
.claro .dijitDialogCloseIconHover {
    background-position : -21px;
}
.claro .dijitDialogCloseIconActive {
    background-position : -42px;
}

  /* Tooltip and TooltipDialog 

*/
.claro .dijitTooltip, .claro .dijitTooltipDialog {
    
  /* the outermost dom node, holding the connector and container 
	*/
background : transparent;/* make the area on the sides of the arrow transparent 
*/

}
.dijitTooltipBelow {
    
  /* leave room for arrow above content 
	*/
padding-top : 13px;
    padding-left : 3px;
    padding-right : 3px;
}
.dijitTooltipAbove {
    
  /* leave room for arrow below content 
	*/
padding-bottom : 13px;
    padding-left : 3px;
    padding-right : 3px;
}
.claro .dijitTooltipContainer {
    
  /* the part with the text 
	*/
background-color : #fff;
    background-image : url("images/tooltip.png");
    background-repeat : repeat-x;
    background-position : -575px 100%;
    /*border : 1px solid #769DC0;*/
    padding : 6px 8px;
    border-radius : 4px;
    -webkit-border-radius : 4px;
    -moz-border-radius : 4px;
    box-shadow : 0px 1px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow : 0px 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow : 0px 1px 3px rgba(0,0,0,0.25);
    font-size : 1em;
    border-width : 1px;
    border-style : solid;
    border-color : #769DC0;
}
.dj_ie6 .claro .dijitTooltipContainer {
    background-image : none;
}
.claro .dijitTooltipConnector {
    
  /* the arrow piece 
	*/
border : 0px;
    z-index : 2;
    background-image : url("images/tooltip.png");
    background-repeat : no-repeat;
    width : 16px;
    height : 14px;
}
.dj_ie6 .claro .dijitTooltipConnector {
    background-image : url("images/tooltip8bit.png");
}
.claro .dijitTooltipABRight .dijitTooltipConnector {
    
  /* above or below tooltip, but the arrow appears on the right,
		and the right edges of target and tooltip are aligned rather than the left 
	*/
left : auto !important;
    right : 3px;
}
.claro .dijitTooltipBelow .dijitTooltipConnector {
    
  /* the arrow piece for tooltips below an element 
	*/
top : 0px;
    left : 3px;
    background-position : -31px 0%;
    width : 16px;
    height : 14px;
}
.claro .dijitTooltipAbove .dijitTooltipConnector {
    
  /* the arrow piece for tooltips above an element 
	*/
bottom : 0px;
    left : 3px;
    background-position : -15px 0%;
    width : 16px;
    height : 14px;
}
.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
    bottom : -1px;
}
.claro .dijitTooltipLeft {
    padding-right : 14px;
}
.dj_ie6 .claro .dijitTooltipLeft {
    padding-left : 15px;
}
.claro .dijitTooltipLeft .dijitTooltipConnector {
    
  /* the arrow piece for tooltips to the left of an element, bottom borders aligned 
	*/
right : 0px;
    bottom : 3px;
    background-position : 0px 0%;
    width : 16px;
    height : 14px;
}
.claro .dijitTooltipRight {
    padding-left : 14px;
}
.claro .dijitTooltipRight .dijitTooltipConnector {
    
  /* the arrow piece for tooltips to the right of an element, bottom borders aligned 
	*/
left : 0px;
    bottom : 3px;
    background-position : -48px 0%;
    width : 16px;
    height : 14px;
}
.claro .dijitDialogUnderlay {
    background : #fff;
}
